<template>
  <div id='tmpl'>
        <ul class="mui-table-view">
				<li v-for="item in list" class="mui-table-view-cell mui-media">
          <!--这里的router-link后面无法跟直接跟to  必须用全写的bv-bind的特殊写法来传值  -->
					<router-link v-bind="{to:'/news/newsinfo/'+item.id}">   
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							{{item.title}}
							<p class='mui-ellipsis'>{{item.zhaiyao}}</p>
              <div class="ft">
                <span>发表时间:{{item.add_time|datefmt("YYYY-MM-DD HH:MM:SS")}}</span>
                <span>点击数:{{item.click}}</span>
              
              </div>
						</div>
					</router-link>
				</li>
			</ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js';
        export default {    
            data(){
              return {        
                  list:[]     //2、这里的list接收到数据后保存 
              }
            },
            created(){        //3、根据生命周期方法 当页面中的data和methods对象都创建完毕以后  进入到首页就会自动调用这个ajax请求
                    this.getnewslist();
            },
            methods:{         //1、这里请求数据   返给上面的list
                getnewslist(){
                  var url = common.apidomain+"/api/getnewslist";
                    this.$http.get(url).then(function(res){   //通过ajax获取后台数据
                        //获取响应报文的数据
                      var body = res.body; 
                        if(body.status!=0){
                          Toast(body.message);
                          return
                        }
                      this.list = body.message;
                    })
                } 
            }
            
        }
</script>

<style scoped>
  .mui-table-view img{
      width: 80px;
      height: 80px;
  }
  .mui-table-view .mui-media-object{
       max-width: 80px;
       line-height: 80px;
     }
  .ft{
       margin-top: 1em;
       font-size: 12px;
       color: #0094ff;
     }
  .ft>span:last-of-type{
    margin-left: 20px;
  }
</style>